<template>
  <div v-click-outside>
    <input type="text" :value="formatDate">
    <div class="pannel" v-if="isVisible">
      <div class="pannel-nav">
        <span @click="preYear">&lt;</span>
        <span @click="preMonth">&lt;&lt;</span>
        <span>{{time.year}}年</span>
        <span>{{time.month + 1}}月</span>
        <span @click="nextMonth">&gt;&gt;</span>
        <span @click="nextYear">&gt;</span>
      </div>
      <div class="pannel-content">
        <div class="days">
        <!-- 直接列出一个 6 * 7 一个列表， 99乘法表-->
          <span class="cell" v-for="j in 7" :key="`_` + j">
            {{weekDays[j - 1]}}
          </span>
          <div v-for="i in 6" :key="i">
            <!--  判断是不是当前月， 不是当用就变灰 -->
            <!--  判断是不是当前的天，设置样式 -->
            <!-- 选择日期的方法 -->
            <!-- 选中日期后增加样式 -->

            <span
                    class="cell cell-days"
                    @click="chooseDate(visibeDays[(i - 1)*7+(j - 1)])"
                    v-for="j in 7"
                    :key="j"
                    :class="[
                      {noCurrentMonth: !isCurrentMonth(visibeDays[(i - 1)*7+(j - 1)])},
                      {today: isToday(visibeDays[(i - 1)*7+(j - 1)])},
                      {select: isSelect(visibeDays[(i - 1)*7+(j - 1)])}
                    ]"

            >
               {{visibeDays[(i - 1)*7+(j - 1)].getDate()}}
            </span>
          </div>
        </div>
      </div>
      <div class="pannel-footer">
        今天
      </div>
    </div>
  </div>
</template>

<script>
  import * as utils from "./util"

  export default {
        directives: {
          clickOutside: { // 指定的生命周期
              bind(el, bindings, vnode){// context
                  // 把时间绑定在document上，看一下点击的是否是当前这个原生内部
                  let handler = (e) => {
                      if (el.contains(e.target)) {
                          // 判断一下是否当前面板已经显示出来了
                          if(!vnode.context.isVisible) {
                              vnode.context.focus()
                              console.log('focus')
                          }
                      } else {
                          if (vnode.context.isVisible) {
                              vnode.context.blur()
                              console.log('blur')
                          }
                      }
                  }
                  el.handler = handler
                  document.addEventListener('click', handler)

              },
              unbind(el) {
                  document.removeEventListener('click', el.handler)
              }

          }
        },
        data () {
              let {year, month} = utils.getYearMonthDay(this.value)
              return {
                  weekDays: ['日', '一', '二', '三', '四', '五', '六'],
                  time: {year, month},
                  isVisible: false // 这个变量是用来控制面板是否可见
              }
        },
        props: {
            value: {
                type: Date,
                default: () => new Date() // 返回的默认值必须是一个函数类型
            }
        },
        computed: {
            formatDate() {
                let {year,month,day} = utils.getYearMonthDay(this.value)
                return `${year}-${month+1}-${day}`
            },
            visibeDays() {
                // 先获取当前是周几
                let {year, month} = utils.getYearMonthDay(utils.getDate(this.time.year, this.time.month, 1))

                // 获取当前月份的第一天
                let currentFirstDay = utils.getDate(year, month, 1)
                // 先 生成一个 当前 2019 5 18  -- 2019 5 1
                // 获取当前是周几 把天数往前 移动 几天
                let week = currentFirstDay.getDay()
                // 当前开始的天数
                let starDay = currentFirstDay - week * 60 *60 *1000 * 24
                // 循环42天
                let arr = []
                for (let i = 0; i < 42; i++) {
                    // 依次循环出42天
                    arr.push(new Date(starDay+i * 60 * 60 * 1000 * 24))
                }
                return arr
            }
        },
        methods: {
            focus() {
                this.isVisible = true
            },
            blur() {
                this.isVisible = false
            },
            // 判断是不是当前月 控制样式
            isCurrentMonth(date) {
                // this.value
                // 我现在知道用户传入的值 2018 5 18 -- 2018 4 28 -- 2018 6 28
                // 判断与传入的 年和月是否一致
                let {year, month} = utils.getYearMonthDay(utils.getDate(this.time.year, this.time.month, 1))
                let {year: y, month: m} = utils.getYearMonthDay(date)
                return year === y && month === m
            },
            // 判断是不是今天，控制样式
            isToday(date) {
                let {year, month, day} = utils.getYearMonthDay(new Date())
                let {year: y, month: m, day: d} = utils.getYearMonthDay(date)
                return year === y && month === m && day === d
            },
            // 选择日期的方法
            chooseDate(date) {
                // 更新日期
              this.time = utils.getYearMonthDay(date)
              this.$emit('input', date)
              this.blur() // 关闭弹层
            },
            // 是否选中日期
            isSelect(date) {
                // 获取当前的年月日
                let {year, month, day} = utils.getYearMonthDay(this.value)
                let {year: y, month: m, day: d} = utils.getYearMonthDay(date)
                return year === y && month === m && day === d
            },
            // 切换(上个月)
            preMonth() {
             // 获取当前的年月的一个日期
              let d = utils.getDate(this.time.year, this.time.month,1)
              d.setMonth(d.getMonth()-1)
              this.time = utils.getYearMonthDay(d)
            },
            // 切换(下个月)
            nextMonth() {
                // 获取当前的年月的一个日期
                let d = utils.getDate(this.time.year, this.time.month,1)
                d.setMonth(d.getMonth()+1)
                this.time = utils.getYearMonthDay(d)
            },
            // 切换(上一年)
            preYear() {
                // 获取当前的年月的一个日期
                let d = utils.getDate(this.time.year, this.time.month,1)
                d.setFullYear(d.getFullYear() - 1)
                this.time = utils.getYearMonthDay(d)
            },
            // 切换(下一年)
            nextYear() {
                // 获取当前的年月的一个日期
                let d = utils.getDate(this.time.year, this.time.month,1)
                d.setFullYear(d.getFullYear() + 1)
                this.time = utils.getYearMonthDay(d)
            },
        }
    }
</script>

<style scoped lang="stylus">
.pannel
  width 32*7px;
  position absolute;
  background #fff;
  box-shadow 2px 2px 2px pink, -2px -2px 2px pink;
  .pannel-nav
    display flex;
    justify-content space-around;
    height 30px;
    span
      cursor pointer;
      user-select none;
  .pannel-content
    .cell
      display inline-flex;
      justify-content center
      align-items center;
      width 32px;
      height 32px;
      font-weight bold;
      box-sizing border-box;
    .cell-days:hover, .select
      border: 1px solid pink;
  .pannel-footer
    height 30px
    text-align center;
.noCurrentMonth
  color gray;
.today
  background red;
  color: #fff
  border-radius 4px;
</style>
